
//  <!-- 
//  - 需求1：仿写vantui框架
//  - 分析1
 
//  > 手册：https://youzan.github.io/vant/#/zh-CN/ 
//  >
//  >  需求：
//  >
//  > ```
//  > 导航栏组件
//  > 按钮(留心click貌似原生事件其实自定义重写了)
//  > loading框
//  > 弹框
//  > 表格（后期居然毕业了都不会复制 懵逼是正常的 能用不就香了 但是不会用  因此自己写
//  > 	https://www.layui.com/demo/table.html
//  > 	https://www.iviewui.com/components/table 
//  > 等等
//  > ``` -->  
  
      Vue.component('vanNavBar',{
           props:['title'],
           template:`<div class="van-nav-bar">
                       <span @click="$emit('click-back')">&lt;返回</span>
                       <span>{{title}}</span>
                       <span @click="$emit('click-search')">搜索</span>
                        </div> `
      })

      Vue.component('vanButton',{
          props:{
               title:String,
               type:{
                       type:String,
                       validitor(val){
                           return ['red','green'].indexOf(!val==-1)
                       },

                

               }
          },
          template:`
                   <button class="van-button" @click="$emit('click')" v-bind:style="{background:type}">{{title}}</button>
                     `
      }) 
     

      Vue.component('vanLoading',{
           props:{
               show:Boolean
            },
        template:`<div class="zloading" v-show="show"></div>`
      }) 


      Vue.component('tankuang',{
          props:{
               title:String,
               show:Boolean
          },
        template:`<div class="tankuang" v-show="show">{{title}}</div>`
      })  

// 表格
      Vue.component('vantable',{
          props:['columns',"data"],
          template:`
          <Table border="1" cellpadding="20" cellspacing="0">
                  <tr>
                  <th v-for="item in columns">{{item.title}}</th>
                 </tr>
                 
                 <tr v-for="item in data">
                 <td v-for="col in columns">{{item[col.key]}}</td>
                </tr>
            
          </Table>
          `
      })